<template>
	<view>
		<u-navbar title="购物车" @rightClick="rightClick" :placeholder='true' :autoBack="true">
			<view class="u-nav-slot" slot="right">
				<view class="" style="color: #5990FF;" v-if="isManage">退出管理</view>
				<view class="" v-else>管理</view>
			</view>
		</u-navbar>
		<view class="shopcar" v-for="(item,index) in goodslist" :key="index" @click="sel(index)">
			<image class="shopcar_img1" v-if="!item.isSel" src="../../static/sel(1).png" mode="">
			</image>
			<image class="shopcar_img1" v-else src="../../static/sel(2).png" mode=""></image>
			<image class="shopcar_img2" src="../../static/bg@2x.png" mode=""></image>
			<view class="shopcar_center">
				<view class="top">
					<view class="name"><u--text :lines="1" :text="item.name"></u--text></view>
					<view class="">x{{item.num}}</view>
				</view>
				<view class="text">{{item.text}}</view>
				<view class="isnum">￥{{item.money}}</view>
			</view>
		</view>
		<view class="" style="height: 108rpx;"></view>
		<view class="shopcarbtn">
			<view class="shopcarbtn_left" @click="allselbtn()">
				<image src="../../static/sel(1).png" v-if="!allsel" mode=""></image>
				<image src="../../static/sel(2).png" v-else mode=""></image>
				<view class="">全选</view>
			</view>
			<view class="shopcarbtn_right" v-if="!isManage">
				<view class="">
					<view class="selnum">已选{{selList.length}}件，合计</view>
					<view class="isnum">￥{{allmoney}}</view>
				</view>
				<view class="selbtn">结算</view>
			</view>
			<view class="shopcarbtn_right" v-else>
				<view class="selbtn" @click="del">删除</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isManage: false,
				goodslist: [{
					name: '水动力护肤补水保湿控油洁水动力护肤补水保湿控油洁',
					text: '水动力护肤补水保湿控油洁面爽肤水 100ml',
					money: 4681.00,
					num: 1,
					isSel: false
				}, {
					name: '水动力护肤补水保湿控油洁水动力护肤补水保湿控油洁',
					text: '水动力护肤补水保湿控油洁面爽肤水 100ml',
					money: 468.00,
					num: 1,
					isSel: false
				}, {
					name: '水动力护肤补水保湿控油洁水动力护肤补水保湿控油洁',
					text: '水动力护肤补水保湿控油洁面爽肤水 100ml',
					money: 468.00,
					num: 1,
					isSel: false
				}, {
					name: '水动力护肤补水保湿控油洁水动力护肤补水保湿控油洁',
					text: '水动力护肤补水保湿控油洁面爽肤水 100ml',
					money: 468.00,
					num: 1,
					isSel: false
				}, {
					name: '水动力护肤补水保湿控油洁水动力护肤补水保湿控油洁',
					text: '水动力护肤补水保湿控油洁面爽肤水 100ml',
					money: 468.00,
					num: 1,
					isSel: false
				}, {
					name: '水动力护肤补水保湿控油洁水动力护肤补水保湿控油洁',
					text: '水动力护肤补水保湿控油洁面爽肤水 100ml',
					money: 468.00,
					num: 1,
					isSel: false
				}, {
					name: '水动力护肤补水保湿控油洁水动力护肤补水保湿控油洁',
					text: '水动力护肤补水保湿控油洁面爽肤水 100ml',
					money: 468.00,
					num: 1,
					isSel: false
				}, {
					name: '水动力护肤补水保湿控油洁水动力护肤补水保湿控油洁',
					text: '水动力护肤补水保湿控油洁面爽肤水 100ml',
					money: 468.00,
					num: 1,
					isSel: false
				}],
				selList: [],
				allsel: false,
				allmoney: 0
			}
		},
		methods: {
			rightClick() {
				this.isManage = !this.isManage
			},
			sel(index) {
				this.allsel = false
				this.selList = []
				this.goodslist[index].isSel = !this.goodslist[index].isSel
				this.goodslist.map((item, itemindex) => {
					if (item.isSel) {
						this.selList.push(item)
					} else {
						this.selList.splice(itemindex, 1)
					}
					if (this.selList.length === this.goodslist.length) {
						this.allsel = true
					} else {
						this.allsel = false
					}
					this.allresult()

				})
			},
			allselbtn() {
				this.allsel = !this.allsel
				this.selList = []
				this.goodslist.map((item, index) => {
					if (this.allsel == true) {
						item.isSel = true
						this.selList = this.goodslist
					} else {
						item.isSel = false
						this.selList = []
					}
					this.allresult()
				})
			},
			allresult() {
				this.allmoney = 0
				this.selList.map((item) => {
					this.allmoney += item.money
				})
			},
			del() {
				this.goodslist.map((item, index) => {
					if (item.isSel == true) {
						this.goodslist.splice(index, 1)
						this.selList = []
					}
					if (this.allsel == true) {
						this.goodslist = []
						this.selList = []
						this.allsel = false
					}
					this.allresult()
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F1EE;
	}

	.u-navbar__content__right {
		/* #ifdef MP-WEIXIN */
		margin-right: 180rpx;
		font-size: 24rpx;
		/* #endif */
	}

	.shopcar {
		width: 690rpx;
		height: 200rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		display: flex;
		padding: 20rpx;
		align-items: center;
		margin: 30rpx auto 0;

		&_img1 {
			width: 24rpx;
			height: 24rpx;
		}

		&_img2 {
			width: 160rpx;
			height: 160rpx;
			margin-left: 20rpx;
			border-radius: 20rpx;
		}

		&_center {
			margin-left: 20rpx;

			.top {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				display: flex;

				.name {
					width: 364rpx;
					margin-right: 36rpx;
				}
			}

			.text {
				width: 364rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				margin: 10rpx 0 16rpx;
			}

			.isnum {
				font-weight: 600;
				font-size: 28rpx;
				color: #ED4961;
			}
		}
	}

	.shopcarbtn {
		width: 750rpx;
		height: 98rpx;
		background: #FFFFFF;
		padding: 13rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		z-index: 999;
		bottom: 0;

		&_left {
			font-weight: 500;
			font-size: 28rpx;
			color: #999999;
			display: flex;
			align-items: center;

			image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 10rpx;
			}
		}

		&_right {
			display: flex;

			.selnum {
				font-weight: 400;
				font-size: 20rpx;
				color: #333333;
			}

			.isnum {
				font-weight: 600;
				font-size: 28rpx;
				color: #ED4961;
			}

			.selbtn {
				width: 204rpx;
				height: 72rpx;
				background: #5990FF;
				border-radius: 36rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 72rpx;
				text-align: center;
				margin-left: 33rpx;
			}
		}
	}
</style>